<template>
  <div id="activityName">
    <div class="body">
      <div class="title">预约门店</div>
      <div class="line"></div>
      <div class="list">
        <img class="red" src="../../images/main/red.png" alt>
        <span class="txt">活动标题：</span>
        <el-input style="width:670px;" type="text" v-model="form.activityTitle" maxlength="30"></el-input>
        <p class="nullRed" v-if="a">活动标题不能为空</p>
      </div>
      <div class="list">
        <img class="red" src="../../images/main/red.png" alt>
        <span class="txt">举办时间：</span>
        <!-- <el-date-picker
          name="date"
          :disabledDate="new Date()"
          v-model="dataPicker"
          type="date"
          :editable="false"
          value-format="timestamp"
          >
        </el-date-picker> -->
        <el-date-picker
          :picker-options="{
            disabledDate: disabledDate
          }"
          v-model="datePicker.date"
          ref="datePickerDate"
          value-format="timestamp"
          :editable="false"
          type="date"
          placeholder="选择日期"
          >
        </el-date-picker>
        <el-time-select
          placeholder="起始时间"
          v-model="datePicker.time[0]"
          @focus="datePickerFocus"
          :picker-options="{
            start: '06:00',
            step: '00:30',
            end: '22:30'
          }">
        </el-time-select>
        <el-time-select
          placeholder="结束时间"
          @focus="datePickerFocus"
          v-model="datePicker.time[1]"
          :picker-options="{
            start: '00:00',
            step: '00:30',
            end: '24:00',
            minTime: datePicker.time[0]
          }">
        </el-time-select>
        <!-- <el-time-picker
          :editable="false"
          is-range
          arrow-control
          value-format="timestamp"
          v-model="datePicker.time"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          @blur="datePickerTimeBlur"
          >
        </el-time-picker> -->
        <p class="nullRed" v-if="b">举办时间不能为空</p>
      </div>
      <div class="list">
        <img class="red" src="../../images/main/red.png" alt>
        <span class="txt">选择场地：</span>
      </div>
      <!-- <div class="storeList" v-for="(item,index) in storeList" :key="index"> -->
      <!-- <div class="list">
          <span class="red"></span>
          <span class="txt"></span>
          <span class="storename">{{item.store.storeName}}</span>
          <span class="address">{{item.store.storeAddress}}</span>
      </div>-->
      <div class="roomBody" style="padding-left: 185px;overflow:hidden;" v-loading="loading">
        <div v-for="(item,key) in storeList" :key="key">
          <div
            :class="indexs == 0 ? 'leftImg' : 'leftImg'"
            v-for="(items,indexs) in item.roomList"
            :key="indexs"
            @click="checkRoom(items.id,item.store.id,item.store.storeName,item.store.storeAddress)"
          >
            <div v-show="form.roomId == items.id" class="task" :id="'show' + items.id" >
              <img class="taskimg" src="../../images/main/duihao.png" alt>
            </div>
            <img :src="items.roomImg" alt>
            <ul>
              <li :title="item.store.storeName">{{item.store.storeName}}</li>
              <li :title="item.store.storeAddress">{{item.store.storeAddress}}</li>
              <li>
                <span>房间类型：</span>
                <span>{{items.roomType}}</span>
              </li>
              <li>
                <span>房间面积：</span>
                <span>{{items.roomArea}}</span>
              </li>
              <li>
                <span>建议容纳人数</span>
                <span>{{items.roomAccommodate}}人</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- </div> -->
      <div class="clear"></div>
      <div class="hdccbl">
        <img class="red" src="../../images/main/red.png" alt>
        <span>活动抽成比例：</span>
        <input v-model="form.percentage" type="tel" @input="setBl()">
        <span class="moneys block">%</span>
        <div>请设置该活动的抽成比例，如活动实际金额为100元，比例为70%，即实际所得为70元（不包含平台佣金）</div>
        <p class="nullRed" v-if="c" style="margin-left: 181px;">活动抽成比例不能为空</p>
      </div>
      <div class="hdccbl">
        <img class="red" src="../../images/main/red.png" alt>
        <span>活动最低参加人数：</span>
        <input v-model="form.participateMin" type="tel" @input="setRs()">
        <span class="moneys block">人</span>
        <div class="tips">
          当前门店最大可接纳{{maxNum}}人
          <br>最低参加人数（若活动开始前24小时未达到最低活动人数，则活动作废）
        </div>
        <p class="nullRed" v-if="d" style="margin-left: 181px;">活动最低参加人数不能为空</p>
      </div>
      <div class="btn" @click="nexts">
        <span>下一步</span>
      </div>
    </div>
  </div>
</template>


<script>
import qs from "qs";
export default {
  props: {
    form: Object
  },
  created() {},
  data: function() {
    return {
      loading: false,
      datePicker: {
        date: '',
        time: []
      },
      a: false,
      b: false,
      c: false,
      d: false,
      rules: [],
      storeList: [],
      // 点击下一部需要传得值
      params: {
        startTime: "",
        endTime: ""
      },
      maxNum: 0
    };
  },
  mounted: function() {},
  created() {
    this.queryFoom();
    // 编辑填充举办时间
  },
  watch: {
    form(val) {
      if (this.form.activityTime && this.form.endTime) {
        let arr = [];
        arr.push(this.form.activityTime);
        arr.push(this.form.endTime);
        this.datePicker.date = this.form.activityTime;
        this.datePicker.time[0] = (new Date(this.form.startTime).getHours() < 10 ? '0' + new Date(this.form.startTime).getHours() : new Date(this.form.startTime).getHours() )+ ':' + (new Date(this.form.startTime).getMinutes() < 10 ? '0'+ new Date(this.form.startTime).getMinutes() : new Date(this.form.startTime).getMinutes())

        this.datePicker.time[1] = (new Date(this.form.time).getHours() < 10 ? '0' + new Date(this.form.time).getHours() : new Date(this.form.time).getHours() )+ ':' + (new Date(this.form.time).getMinutes() < 10 ? '0'+ new Date(this.form.time).getMinutes() : new Date(this.form.time).getMinutes())
        this.queryRooms();
      }
    },
    'datePicker.date'( val ) {
      if ( this.datePicker.time.length === 2 ) {
        let d = new Date ( this.datePicker.date );
        let start = new Date( d.getFullYear (), d.getMonth (), d.getDate (), this.datePicker.time[0].split ( ':' )[0], this.datePicker.time[0].split ( ':' )[1]).valueOf ();
        let end = new Date( d.getFullYear (), d.getMonth (), d.getDate (), this.datePicker.time[1].split ( ':' )[0], this.datePicker.time[1].split ( ':' )[1]).valueOf ();
        this.form.startTime = start;
        this.form.time = end;
        this.queryRooms();
      }
    },
    'datePicker.time'( val ) {
      if ( val && val.length === 2 ) {
        let d = new Date ( this.datePicker.date );
        let start = new Date( d.getFullYear (), d.getMonth (), d.getDate (), val[0].split ( ':' )[0], val[0].split ( ':' )[1]).valueOf ();
        let end = new Date( d.getFullYear (), d.getMonth (), d.getDate (), val[1].split ( ':' )[0], val[1].split ( ':' )[1]).valueOf ();
        this.form.startTime = start;
        this.form.time = end;
        this.queryRooms();
      } else {
        this.form.startTime = '';
        this.form.time = '';
      }
    }
  },
  methods: {
    disabledDate( val ) {
      if ( val.valueOf () >= new Date ().valueOf ()) {
        return false;
      } else {
        return true;
      }
    },
    datePickerFocus() {
      if ( !this.datePicker.date ) {
        this.$alert ( '请选择日期' );
        this.$refs.datePickerDate.focus ();
      }
    },
    /**
     * 设置日期不可选中
     */
    // setRead: function() {
    //   let tags = document.getElementsByClassName("el-input__inner");
    //   for (let i = 0; i < tags.length; i++) {
    //     tags[i].onfocus = function() {
    //       this.setAttribute("readonly", "readonly");
    //     };
    //   }
    // },
    /**
     * 设置日期
     */
    // setDataPicker: function() {
    //   this.form.startTime = this.dataPicker[0];
    //   this.form.time = this.dataPicker[1];
    //   let tags = document.getElementsByClassName("el-input__inner");
    //   for (let i = 0; i < tags.length; i++) {
    //     tags[i].setAttribute("readonly", "readonly");
    //   }
    //   let that = this;
    //   // console.log(this.form.startTime)
    //   if (this.form.startTime === this.form.time) {
    //     this.$alert("结束时间必须大于开始时间!");
    //     this.dataPicker = [];
    //     return false;
    //   }
    //   if (this.form.startTime < new Date().getTime() + 24 * 60 * 60 * 1000) {
    //     this.$alert("只能发布24小时以后的活动哦!");
    //     this.dataPicker = [];
    //     return false;
    //   }
    //   this.b = false;
    //   this.queryRooms();
    // },
    queryRooms() {
      let data = {
        startTime: this.$moment(this.form.startTime)
          .format("YYYY-MM-DD HH:mm:ss")
          .replace(/\+/g, " "),
        endTime: this.$moment(this.form.time)
          .format("YYYY-MM-DD HH:mm:ss")
          .replace(/\+/g, " "),
        serviceId: this.$store.state.userId
      };
      this.loading = true;
      let that = this;
      this.axios
        .get(`store/selectStore`, { params: data })
        .then(res => {
          if (res.data.code == 0) {
            let bol = false;
            if (res.data.data.length == 0) {
              that.$alert("暂无可用房间！");
            }
            let arr = res.data.data;
            that.storeList = res.data.data;
            that.$set(that, "storeList", res.data.data);
            this.loading = false;
            arr.map(val => {
              val.roomList.map(vals => {
                if (vals.id == that.form.roomId) {
                  bol = true;
                }
              });
            });
            if (!bol && that.form.roomId) {
              that.$alert("当前场地已被预约,请重新选择!");
              that.form.roomId = "";
            }
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
    /**
     * 设置比例
     */
    setBl: function() {
      this.form.percentage = this.form.percentage.replace(/[^0-9]/ig,"")
      if (this.form.percentage > 100) {
        this.form.percentage = 100;
      } else if (this.form.percentage < 0 && this.form.percentage != '') {
        this.form.percentage = 0;
      }
    },
    /**
     * 设置人数
     */
    setRs: function() {
      if (this.maxNum == 0) {
        this.$alert("请选择活动房间");
      }
      this.form.participateMin = this.form.participateMin.replace(/[^0-9]/ig,"")
      if (this.form.participateMin > this.maxNum) {
        this.form.participateMin = this.maxNum;
      } else if (this.form.participateMin < 1 && this.form.participateMin != '') {
        this.form.participateMin = 1;
      }
    },
    /**
     * 选择房间
     */
    checkRoom: function(id, ids, name, address, bol) {
      if (!bol && !this.form.startTime) {
        this.$alert("请先选择时间!");
        return false;
      }
      let tag = document.getElementById("show" + id);
      let bols = false;
      if (tag && tag.style.display == "none") {
        bols = true;
      }
      let tags = document.getElementsByClassName("task");
      for (let i = 0; i < tags.length; i++) {
        tags[i].style.display = "none";
      }
      if (tag && tag.style.display == "none" && bols) {
        tag.style.display = "block";
        this.form.roomId = id;
        this.form.storeId = ids;
        // this.form.roomId = name
        this.form.activityAddress = address;
      } else {
        if (tag) {
          tag.style.display = "none";
        }
        this.form.roomId = "";
      }
      if (bol) {
        let obj = document.getElementById("show" + id);
        if (obj) {
          obj.style.display = "block";
        }
        this.form.roomId = id;
        this.form.storeId = ids;
      }
      for (let i = 0; i < this.storeList.length; i++) {
        let arr = this.storeList[i].roomList;
        for (let j = 0; j < arr.length; j++) {
          if (arr[j].id == this.form.roomId) {
            this.maxNum = arr[j].roomAccommodate;
          }
        }
      }
    },
    queryFoom: function() {
      let that = this;
      that
        .axios({
          method: "get",
          url: `store/selectStore`,
          params: {
            serviceId: this.$store.state.userId
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            that.storeList = res.data.data;

            if (that.form.activityAddress) {
              setTimeout(() => {
                that.checkRoom(
                  that.form.roomId,
                  that.form.storeId,
                  "",
                  that.form.activityAddress,
                  true
                );
              }, 500);
            }
          }
        });
    },
    // 点击下一步
    nexts: function() {
      console.log(this.form.activityAddress,'222')
      this.a = !this.form.activityTitle;
      if (this.datePicker.time.length > 0) {
        this.b = false;
      } else {
        this.b = true;
      }

      this.c = !this.form.percentage;
      this.d = !this.form.participateMin;
      if (!this.form.roomId || !this.form.storeId) {
        this.$alert("请选择房间!");
      }
      if (
        this.form.activityTitle &&
        !this.b &&
        this.form.percentage &&
        this.form.participateMin &&
        this.form.roomId &&
        this.form.storeId
      ) {
        this.axios({
          method: "get",
          url: `/store/selectTFRoom`,
          params: {
            startTime: this.$moment(this.form.startTime)
              .format("YYYY-MM-DD HH:mm:ss")
              .replace(/\+/g, " "),
            endTime: this.$moment(this.form.time)
              .format("YYYY-MM-DD HH:mm:ss")
              .replace(/\+/g, " "),
            roomId: this.form.roomId
          }
        }).then(res => {
          if (res.data.code == 0) {
            if (res.data.data) {
              this.queryRooms();
              this.$message({
                message: "当前门店已关闭，请重新选择",
                type: "warning"
              });
              return false;
            } else {
              this.$emit("go-edit", this.form);
            }
          }
        });
      }
    }
  }
};
</script>

<style type="text/scss" lang="scss" scoped>
/*data-picker中input清除样式*/

.moneys {
  background: #4B74FF;
  border: 1px solid #979797;
  width: 38px;
  height: 38px;
  color: white;
  display: inline-block;
  margin-left: -9px;
  text-align: center;
}
.task {
  opacity: 0.41;
  background: #000000;
  border: 1px solid #979797;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
  // display: none;
}
#activityName .leftImg .taskimg {
  position: absolute;
  width: 66px;
  height: 66px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  display: inline-block;
}
.storeList {
  width: 90%;
  display: inline-block;
}
#activityName .title {
  margin-top: 99px;
  height: 33px;
  line-height: 33px;
  font-size: 24px;
  font-weight: bold;
  color: #000;
}
#activityName .body {
  /* margin-left: 135px; */
}
#activityName .line {
  background: #9e9f9f;
  /* width: 1641px; */
  height: 1px;
  margin-top: 26px;
}
#activityName .list {
  height: 40px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  line-height: 40px;
  margin-top: 64px;
  padding-left: 71px;
  /* width: 1570px; */
}
#activityName input {
  background: #ffffff;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  width: 317px;
  height: 40px;
  text-align: center;
  font-size: 18px;
  color: #9b9b9b;
  box-sizing: border-box;
}
#activityName .date {
  background: #ffffff;
  width: 317px;
  height: 40px;
  text-align: center;
  font-size: 18px;
  color: #9b9b9b;
}
#activityName .end {
  margin-left: 125px;
}
#activityName .red {
  width: 10px;
  height: 10px;
}
#activityName .txt {
  width: 101px;
  display: inline-block;
  text-align: left;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  font-weight: bold;
  color: #000000;
}
#activityName .input {
  margin-left: 90px;
  display: inline-block;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #888888;
}
#activityName .storename {
  margin-left: 15px;
}
#activityName .address {
  margin-left: 40px;
}
#activityName .leftImg {
  height: 4360px;
  margin-top: 30px;
}
#activityName .roomBody .firimg {
  margin-left: 185px;
  width: 1200px;
}
#activityName .leftImg {
  float: left;
  background: #ffffff;
  border: 1px solid #efefef;
  box-shadow: 0 2px 6px 0 #efefef;
  width: 24%;
  height: 504px;
  margin-left: 10px;
  cursor: pointer;
  position: relative;
}
#activityName .mleft {
  margin-left: 191px;
}
#activityName .leftImg img {
  width: 100%;
  height: 228px;
  display: inline-block;
  margin-bottom: 20px;
}
#activityName .leftImg ul li {
  font-weight: bold;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #efefef;
  font-family: PingFangSC-Regular;
  font-size: 18px;
  color: #000000;
  letter-spacing: 0.03px;
  text-align: center;
  overflow: hidden;
}
#activityName .leftImg ul li:nth-child(3) {
  // border: 0px;
}
#activityName .hdccbl .block {
  background: #4B74FF;
  border: 1px solid #979797;
  width: 38px;
  height: 38px;
  font-size: 18px;
  color: #ffffff;
  line-height: 38px;
  text-align: center;
  display: inline-block;
}
#activityName .clear {
  clear: both;
}
#activityName .hdccbl {
  /* width: 1600px; */
  height: 40px;
  line-height: 40px;
  padding-left: 71px;
  margin-top: 60px;
}
#activityName .hdccbl span {
  display: inline-block;
  font-size: 18px;
  color: #000000;
  width: 163px;
  font-weight: bold;
}
#activityName .hdccbl input {
  width: 280px;
  background: #ffffff;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  width: 317px;
  height: 40px;
  font-size: 18px;
  color: #9b9b9b;
  text-align: center;
  box-sizing: border-box;
}
#activityName .hdccbl > div {
  font-size: 14px;
  color: #4B74FF;
  display: inline-block;
  margin-left: 23px;
  font-weight: bold;
  width: 460px;
  height: 20px;
  line-height: 20px;
}
#activityName .btn {
  background: #4B74FF;
  width: 255px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  border-radius: 55px;
  margin: 87px auto;
  cursor: pointer;
}
#activityName .btn span {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 0.03px;
  text-align: left;
}
#activityName .nullRed {
  color: red;
  font-size: 12px;
  margin-left: 120px;
}
</style>
